<script setup>
import { forEach } from 'lodash-es';
import { useRequest } from '@/hooks/requestHooks.js';
import { useResetForm } from '@/hooks/tool.js';
import { useWatch } from '@/hooks/useWatch.js';
import { getMPInfo, getTreeData, getMPTree } from '@/api/index.js';
import EnterpriseTree from '@/components/EnterpriseInfo/EnterpriseTree.vue';
const props = defineProps({
  enterpriseCode: { type: String, default: '' },
  cancel: { type: Boolean, delete: null },
  mpbiDisabled: { type: Boolean, default: false },
  open: { type: Boolean, default: false },
  mpbiProjectCode: { type: String, default: '' },
  openTitle: { type: String, default: () => '' },
});
const { enterpriseCode, cancel, mpbiDisabled, open, mpbiProjectCode, openTitle } = toRefs(props);
const emit = defineEmits(['selectReport']);
const Forms = ref(null);
const queryParams = ref({
  projectName: '',
  projectCode: '',
  buildingCodes: [],
});
const treeDefault = ref([]);
const showCheckbox = ref(true);
const treeData = ref([]);
let currentCode = ref([]);
const findAllNode = data => {
  forEach(data, n => {
    if (!currentCode.value.includes(n?.id) && n.identification) {
      currentCode.value.push(n.id);
    }
    if (n?.children) {
      findAllNode(n?.children);
    }
  });
};
const setDisabled = arr => {
  arr.forEach(item => {
    item.disabled = true;
    if (item?.children) {
      setDisabled(item.children);
    }
  });
  return arr;
};
const [, , treeRun] = useRequest(getTreeData, {
  defaultParams: [{ enterpriseCode: props.enterpriseCode }],
  manual: true,
  onSuccess: res => {
    // let arr = forEach(res.data, el => {
    //   el.disabled = true;
    // });
    treeData.value = res.data;
  },
});
const [detailsTree, , detailsTreeRun] = useRequest(getMPTree, {
  defaultParams: [],
  manual: true,
  onSuccess: res => {
    treeData.value = res?.data ?? [];
    findAllNode(treeData.value);
    treeDefault.value = currentCode.value;
    setDisabled(treeData.value);
  },
});
const [, projectInfoLoading, projectInfoRun] = useRequest(getMPInfo, {
  defaultParams: [{ projectCode: props.mpbiProjectCode }],
  manual: true,
  onSuccess: data => {
    let n = data.data;
    queryParams.value.projectName = n?.projectName ?? '';
    queryParams.value.projectCode = n?.projectCode ?? '';
    queryParams.value.buildingCodes = n?.buildingCodes ?? [];
    if (openTitle.value === '详情') {
      detailsTreeRun({ projectCode: props.mpbiProjectCode });
    } else {
      treeDefault.value = n?.buildingCodes ?? [];
      emit('selectReport', queryParams.value);
    }
  },
});
const changeProjectName = val => {
  emit('selectReport', queryParams.value);
};
const handleCheckChange = params => {
  queryParams.value.buildingCodes = params.split(',');
  emit('selectReport', queryParams.value);
};
useWatch(
  cancel,
  n => {
    if (n) {
      useResetForm(Forms);
      queryParams.value = {
        projectName: '',
        projectCode: '',
        buildingCodes: [],
      };
      treeData.value = [];
      treeDefault.value = [];
    } else {
      if (openTitle.value !== '详情') treeRun({ enterpriseCode: props.enterpriseCode });
      // showCheckbox.value = openTitle.value === '详情' ? false : true;
      if (openTitle.value === '新增') {
        treeDefault.value = [];
      } else {
        projectInfoRun({ projectCode: mpbiProjectCode.value });
      }
    }
  },
  { deep: true, immediate: true },
);
</script>
<template>
  <div v-loading="projectInfoLoading">
    <el-form
      :model="queryParams"
      ref="Forms"
      size="small"
      label-width="135px"
      class="uploadForm u-mt20"
      inline
      :disabled="mpbiDisabled"
    >
      <el-form-item
        label="监测项目名称："
        prop="projectName"
        :rules="[
          { required: true, message: '请输入监测项目名称', trigger: 'blur' },
          { min: 0, max: 50, message: '名称长度不超过50个字符', trigger: 'blur' },
        ]"
      >
        <el-input
          v-filter-input
          style="width: 400px"
          v-model.trim="queryParams.projectName"
          placeholder="请输入监测项目名称"
          clearable
          size="small"
          @change="changeProjectName"
        />
      </el-form-item>
      <el-form-item label="监测项目编号：" prop="projectCode">
        <el-input
          v-if="openTitle !== '新增'"
          v-filter-input
          style="width: 400px"
          v-model.trim="queryParams.projectCode"
          placeholder=""
          clearable
          size="small"
          disabled
        />
        <div v-else>--</div>
      </el-form-item>
      <br />
      <el-form-item
        label="关联监测机构区域"
        prop=""
        :rules="{ required: true, message: '请选择', trigger: 'change' }"
        style="margin-bottom: 0"
      ></el-form-item>
    </el-form>
    <EnterpriseTree
      :data="treeData"
      :showCheckbox="showCheckbox"
      :defaultCheckedKeys="treeDefault"
      @handleCheckChange="handleCheckChange"
    />
  </div>
</template>
<style lang="scss" scoped>
::v-deep .el-table__header-wrapper .el-checkbox {
  display: none;
}
</style>
